<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="../lib/three.js/build/three.min.js"></script>

<script type="text/javascript">

    var scene = null;
    var camera = null;
    var renderer = null;

    function init() {
        renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById('mainCanvas')    //绑定元素
        });
        renderer.setClearColor(0x000000);
        scene = new THREE.Scene();          //创建场景

        camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);    //创建照相机 ，添加属性 将照相机添加到场景中
        camera.position.set(5, 15, 25);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

        //var light = new THREE.PointLight(0xff0000,1.5,2);           //添加光照 。将光照添加到场景中
        var light = new THREE.DirectionalLight();
        light.position.set(0, 1.5, 2);
        scene.add(light);

        var greenCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),         //创建立方体 添加到场景中
            new THREE.MeshLambertMaterial({ color: 0x00ff00 }));
        greenCube.position.x = 3;
        scene.add(greenCube);

        var whiteCube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),          //创建立方体 添加到场景中
            new THREE.MeshLambertMaterial({ color: 0xffffff }));
        whiteCube.position.x = -3;
        scene.add(whiteCube);
        
        renderer.render(scene, camera);     //绘制
    }

</script>
</body>

</html>

<!--
    我们都知道，太阳光常常被看作平行光，这是因为相对地球上物体的尺度而言，太阳离我
们的距离足够远。对于任意平行的平面，平行光照射的亮度都是相同的，而与平面所在位
置无关。
平行光的构造函数是：
THREE.DirectionalLight(hex, intensity)
其中， hex 是光源十六进制的颜色值； intensity 是亮度，缺省值为 1，表示 100%亮度。
此外，对于平行光而言，设置光源位置尤为重要。
-->